<template>
  <div class="dict-normal">
    <div class="info-box flex-c-s flex-wrap">
      <div class="row flex-c-s">
        <div class="field">姓名：</div>
        <div class="value">{{ personUserInfo.name | desensitization("name")}}</div>
      </div>
      <div class="row flex-c-s">
        <div class="field">身份证号：</div>
        <div class="value">{{ personUserInfo.idCard | desensitization("idCard")}}</div>
      </div>
      <div class="row flex-c-s">
        <div class="field">电话：</div>
        <div class="value">{{ personUserInfo.phone | desensitization("mobile")}}</div>
      </div>
      <div class="row flex-c-s">
        <div class="field">出生日期：</div>
        <div class="value">{{ personUserInfo.birthday | formatDate("date")}}</div>
      </div>
      <div class="row flex-c-s">
        <div class="field">家庭地址：</div>
        <div class="value">{{ personUserInfo.address | desensitization("address")}}</div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: "filters-other-normal",
  data() {
    return {
      personUserInfo: {
        name: "沈小布",
        phone: "123456789001",
        birthday: "19950105",
        address: "宁夏回族自治区闽宁镇金滩村涌泉社区520号",
        idCard: "350624199501051314"
      }
    }
  }
}
</script>

<style lang="less" scoped>
  .info-box {
    padding: 0 20px;
    .row {
      width: 100%;
      margin-top: 32px;
      align-items: flex-start;
      .field {
        width: 144px;
        font-size: 16px;
        color: #666666;
        line-height: 18px;
      }
      .value {
        font-size: 16px;
        color: #333333;
        line-height: 18px;
      }
    }
  }

</style>